import React from "react";
import frame from '../../../style/frame.less';

import store from '../../Redux'
import connect from "react-redux/es/connect/connect";
import * as Actoin from "../../services/action";

class Tpage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.state.data = {
            "pageNum": 1,
            "pageSize": 20,
            "navigatePages": 5,
        }
    }

    componentDidMount() {
        // this.props.loadModuleMenu('pageSize', this.state.data.pageSize);
    }

    toNextPage = (e) => {
        this.props.loadModuleMenu('pageNum', parseInt(e.currentTarget.getAttribute("data-value")) > this.props.pages - 1 ? this.props.pages : parseInt(e.currentTarget.getAttribute("data-value")) + 1)//TODO 业务代码需要迁移
    };

    toPrePage = (e) => {
        this.props.loadModuleMenu('pageNum', parseInt(e.currentTarget.getAttribute("data-value")) <= 1 ? 1 : parseInt(e.currentTarget.getAttribute("data-value")) - 1)//TODO 业务代码需要迁移
    };

    toSpecifiedPage = (e) => {
        this.props.loadModuleMenu('pageNum', e.currentTarget.getAttribute("data-value"))
    };

    render() {
        return (
            <div className={frame.tablePage}>
                <div>
                    <span>当前：{this.props.pageNum}&nbsp;/&nbsp;{this.props.pages}&nbsp;页</span>
                    <div className={frame.pageContent}>
                        <div data-value={this.props.pageNum} onClick={this.toPrePage}
                             style={{display: 'inline-block', marginRight: '10px', cursor: 'pointer'}}>上页
                        </div>
                        <div style={{display: 'inline-block'}}>
                            {this.props.navigatepageNums.map((name, index) => {
                                return (
                                    <span key={index} data-value={name} onClick={this.toSpecifiedPage}
                                          className={`${frame.page} ${name == this.props.pageNum ? frame.selected : ''}`}>{name}</span>
                                )
                            })}
                        </div>
                        <div data-value={this.props.pageNum} onClick={this.toNextPage}
                             style={{display: 'inline-block', marginLeft: '10px', cursor: 'pointer'}}>下页
                        </div>
                        <div style={{display: 'inline-block'}}>
                            <span>，跳转至&nbsp;</span>
                            <div style={{display: 'inline-block', width: '40px', margin: '0 5px'}}>
                                <span>{this.props.pages}</span>
                            </div>
                            <span>&nbsp;页</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (store) => {
    return {
        pages: store.pages,
        pageNum: store.pageNum,
        pageSize: store.pageSize,
        navigatePages: store.navigatePages,
        navigatepageNums: store.navigatepageNums
    }
};

export default connect(mapStateToProps, Actoin)(Tpage)
